import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { DragDropContextProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import { Row, Col, Divider, Icon } from 'antd';
import Enumerable from 'linq';
import { ItemPanel, Designer, convertShow } from '@/components/Designer';
import style from './style';

import styles from './index.less';

@connect(() => ({}))
class DesignerPage extends PureComponent {
  state = { designerWidth: 0, designerHeight: 0 };

  componentDidMount() {
    const designerContent = document.getElementById('designerContent');
    if (designerContent) {
      this.setState({
        designerWidth: designerContent.offsetWidth,
        designerHeight: designerContent.offsetHeight,
      });
    }
  }

  convertShow = oldStyle => {
    const pageSetting = {
      ...oldStyle.pageSetting,
      size: [convertShow(oldStyle.pageSetting.size[0]), convertShow(oldStyle.pageSetting.size[1])],
    };
    const controls = Enumerable.from(oldStyle.controls)
      .select(control => {
        return {
          ...control,
          position: {
            top: convertShow(control.position.top),
            left: convertShow(control.position.left),
          },
          size: {
            width: convertShow(control.size.width),
            height: convertShow(control.size.height),
          },
        };
      })
      .toArray();
    const newStyle = { ...oldStyle, pageSetting, controls };
    return newStyle;
  };

  render() {
    const { designerWidth, designerHeight } = this.state;
    const newStyle = this.convertShow(style);
    return (
      <DragDropContextProvider backend={HTML5Backend} className={styles.designer}>
        <Row type="flex">
          <Col span={4} className={styles.designerItembar}>
            <h3 className={styles.headTitle}>
              <Icon type="select" className={styles.headIcon} />
              节点选择
            </h3>
            <Divider className={styles.headDivider} />
            <ItemPanel
              onItemClick={item => {
                console.log(`点击了${item.name}`);
              }}
            />
          </Col>
          <Col span={20}>
            <Row type="flex" className={styles.designerToobar} />
            <Row type="flex" className={styles.designerMain}>
              <Col id="designerContent" span={20} className={styles.designerContent}>
                <Designer
                  designerWidth={designerWidth}
                  designerHeight={designerHeight}
                  style={newStyle}
                />
              </Col>
              <Col span={4} className={styles.designerPropbar}>
                <h3 className={styles.headTitle}>
                  <Icon type="edit" className={styles.headIcon} />
                  编辑节点
                </h3>
                <Divider className={styles.headDivider} />
              </Col>
            </Row>
          </Col>
        </Row>
      </DragDropContextProvider>
    );
  }
}

export default DesignerPage;
